<template>
    <view>
        <view class="Take_box">
            <view class="Title">
                <view class="d-flex a-center p-left20">
                    <text class="iconfont icon-a-fenleidiancanT9 color_33 size34 p-right20"></text>
                    <text class="black size30">超时有赔礼</text>
                </view>
                <view class="Time" :class="{ Overtime: Overtime }">
                    <text class="p-right10">已等待</text>
                    <text>{{ formatToTime }}</text>
                </view>
            </view>

            <view class="content">
                <text class="content_title">{{ pass.pass_msg }}</text>
                <scroll-view scroll-x="true" class="nowrap content_box">
                    <view class="boxLi" :class="{ opacity05: !Overtime }" v-for="(item, index) in gifts" :key="index">
                        <view class="boxImg">
                            <image :src="$imgUrls(item.img)" mode="aspectFill" class="wh"></image>
                            <!-- <view class="selectDan" >
								<view class="iconfont icon-xuanzhong white size30"></view>
							</view> -->
                        </view>
                        <text class="box_title ellipsis">{{ item.name }}</text>
                    </view>
                </scroll-view>
                <view class="rows m-top10" v-if="Overtime">
                    <!-- <view class="row j-centert">
							<view class="Overend">请选择获赠礼品 4选3</view>
						<view class="Config">确定选择</view>
					</view> -->
                    <view class="Overend">{{ pass.gifts_msg }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import { beforeDestroy } from 'uview-ui/libs/mixin/mixin';
    export default {
        props: ['gifts', 'pass', 'line_detail'],
        data() {
            return {
                Overtime: false,
                seconds: 0,
                downTime: null,
                Img: 'https://imgcdn.mogoie.com/6099/1693813515733.jpg'
            };
        },

        methods: {
            getTime(seconds) {
                this.seconds = seconds;
                if (this.seconds >= this.pass.gifts_down_msg) this.Overtime = true;
                this.downTime = setInterval(() => {
                    this.seconds++;
                    console.log(this.seconds, 'this.seconds');
                }, 1000);
            },
            stopCountdown() {
                if (this.downTime) clearInterval(this.downTime);
            }
        },
        watch: {
            line_detail: {
                deep: true,
                immediate: true,
                handler(newVal, oldVal) {
                    if (newVal.state == 0) {
                        this.getTime(this.pass.pass_seconds || 0);
                    } else {
                        this.seconds = this.pass.pass_seconds;
                        this.stopCountdown();
                    }
                }
            }
        },
        computed: {
            formatToTime() {
                const hours = Math.floor(this.seconds / 3600);
                const seconds = this.seconds % 3600;
                const minutes = Math.floor(seconds / 60);
                const secs = seconds % 60;
                const paddedHours = String(hours).padStart(2, '0');
                const paddedMinutes = String(minutes).padStart(2, '0');
                const paddedSeconds = String(secs).padStart(2, '0');
                return `${paddedHours}:${paddedMinutes}:${paddedSeconds}`;
            }
        }
    };
</script>

<style lang="scss" scoped>
    .Take_box {
        width: 100%;
        background-color: #ffffff;
        border-radius: 10rpx;
        margin-top: 20rpx;
    }

    .Title {
        width: 100%;
        height: 100rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1rpx solid $page;
    }

    .Time {
        padding-right: 20rpx;

        text {
            font-size: 28rpx;
            color: #000;
        }
    }

    .Overtime {
        text {
            color: red;
        }
    }

    .content {
        width: 100%;
        padding: 24rpx 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        &_title {
            color: #333;
            font-size: 28rpx;
        }

        &_box {
            width: 100%;
            height: 200rpx;
            margin-top: 20rpx;
            text-align: center;

            .boxLi {
                display: inline-block;
                width: 150rpx;
                margin: 0 10rpx;

                .boxImg {
                    width: 100%;
                    height: 150rpx;
                    border-radius: 10rpx;
                    overflow: hidden;
                    position: relative;

                    .selectDan {
                        width: 40rpx;
                        height: 40rpx;
                        background-color: var(--color);
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        position: absolute;
                        bottom: 0;
                        right: 0;
                        border-radius: 10rpx 0 0 0;
                    }
                }

                .box_title {
                    width: 100%;
                    text-align: center;
                    color: #333;
                    font-size: 24rpx;
                    padding-top: 10rpx;
                }
            }
        }

        .Overend {
            width: 100%;
            display: flex;
            justify-content: center;
            font-size: 30rpx;
            color: #000;
        }

        .Config {
            width: 200rpx;
            height: 70rpx;
            background-color: #169bd5;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 28rpx;
            margin-top: 14rpx;
            border-radius: 10rpx;
        }
    }
</style>
